var webpack = require('webpack')

// 由于webapck 是基于node进行构建，所以，webpack中的配置文件，任何合法的Node代码都是支持的
var path = require('path')
//在内存中，根据指定的模板页面，生成一份内的中的首页，同事自定把打包好的bundle注入页面底部
var htmlWebpackPlugn = require('html-webpack-plugin')
// 如果要配置插件。需要在导出的对象中，挂载一个plugins节点

// 报错这些
// Module Error (from ./node_modules/vue-loader/lib/index.js):
// vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your 
// webpack config.

const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件。此时会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个
// 配置对象，然后根据这个对象，进行打包构建
module.exports = {
    entry: path.join(__dirname, './src/main.js'), //入口文件
    output: { //输出指向
        path: path.join(__dirname, './dist'), //输出路径
        filename: 'bundle.js' //制定输出文件的名称
    },
    plugins: [ //所有webpack 插件的配置节点
        new htmlWebpackPlugn({
            template: path.join(__dirname, './src/index.html'), //指定模板文件路径
            filename: 'index.html' //设置生成的内存页面的名称
        }),
        new webpack.ProvidePlugin({
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery"
        }),
        new VueLoaderPlugin()
    ],
    module: { //配置所有第三方loader模块
        rules: [ //第三方模块的匹配规则
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, //处理css文件 的loader
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, //配置less样式
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // {
            //     test: /\.scss$/,
            //     loaders: ['style', 'css', 'sass']
            // },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: 'url-loader?limit=293456&name=[hash:8]-[name].[ext]'
            }, //处理图片路径的loader
            //    limit给定的值，是图片的大小，单位是byte,如果我们引用的图片，大于或者等于给定的Limit的值，则不会被转为base64位的字符串，如果图片小于给定的limit值，则会被转为base64位的字符串
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            }, //处理字体文件
            //    {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//这是配置babel来转换高级语法
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    resolve: {
        //  alias: {//修改Vue被导入时候的包的路径
        //   "vue$":"vue/dist/vue.js"
        //  }
    }
}